<template>
  <div id="app">
    <MainDialog
        v-if="showDialog"
        title="开发者工具"
        :initial-position="dialogPosition"
        @close="showDialog = false"
    />

    <button
        ref="floatingBtn"
        class="toggle-btn"
        :style="{
        left: position.x + 'px',
        top: position.y + 'px'
      }"
        @mousedown="startDrag"
        @click="handleClick"
    >
      <i class="icon-tools"></i>
    </button>
  </div>
</template>

<script>
import MainDialog from './components/MainDialog.vue'
import { ref, onMounted, onUnmounted } from 'vue'

export default {
  components: { MainDialog },
  setup() {
    const showDialog = ref(false)
    const floatingBtn = ref(null)
    const dialogPosition = ref({ x: 'center', y: 'center' })
    const position = ref({ x: 20, y: 20 })
    const isDragging = ref(false)
    const dragStart = ref({ x: 0, y: 0 })
    const clickStartPos = ref({ x: 0, y: 0 })

    // 从本地存储恢复位置
    onMounted(() => {
      const savedPos = localStorage.getItem('devtools-button-position')
      if (savedPos) {
        position.value = JSON.parse(savedPos)
      }
    })

    const startDrag = (e) => {
      if (e.button !== 0) return // 只响应左键
      e.preventDefault()

      isDragging.value = true
      dragStart.value = {
        x: e.clientX - position.value.x,
        y: e.clientY - position.value.y
      }
      clickStartPos.value = {
        x: e.clientX,
        y: e.clientY
      }

      document.addEventListener('mousemove', onDrag)
      document.addEventListener('mouseup', stopDrag)
    }

    const onDrag = (e) => {
      if (!isDragging.value) return

      position.value = {
        x: e.clientX - dragStart.value.x,
        y: e.clientY - dragStart.value.y
      }

      constrainPosition()
    }

    const stopDrag = (e) => {
      if (!isDragging.value) return

      isDragging.value = false
      document.removeEventListener('mousemove', onDrag)
      document.removeEventListener('mouseup', stopDrag)

      // 保存位置到本地存储
      localStorage.setItem('devtools-button-position', JSON.stringify(position.value))
    }

    const handleClick = (e) => {
      // 检查是否是拖动后的点击（移动距离小于5px视为点击）
      const dx = Math.abs(e.clientX - clickStartPos.value.x)
      const dy = Math.abs(e.clientY - clickStartPos.value.y)

      if (dx < 5 && dy < 5) {
        toggleDialog()
      }
    }

    const constrainPosition = () => {
      const btnWidth = floatingBtn.value?.offsetWidth || 50
      const btnHeight = floatingBtn.value?.offsetHeight || 50

      position.value.x = Math.max(0, Math.min(window.innerWidth - btnWidth, position.value.x))
      position.value.y = Math.max(0, Math.min(window.innerHeight - btnHeight, position.value.y))
    }

    const toggleDialog = () => {
      showDialog.value = !showDialog.value
    }

    // 清理事件监听器
    onUnmounted(() => {
      document.removeEventListener('mousemove', onDrag)
      document.removeEventListener('mouseup', stopDrag)
    })

    return {
      showDialog,
      floatingBtn,
      position,
      dialogPosition,
      startDrag,
      handleClick,
      toggleDialog
    }
  }
}
</script>

<style scoped>
#app {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 999999;
  pointer-events: none;
}

.toggle-btn {
  position: fixed;
  width: 50px;
  height: 50px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, #00ff87 0%, #60efff 100%);
  color: #111;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.3);
  z-index: 1000000;
  cursor: move;
  pointer-events: auto;
  transition: transform 0.2s ease;
  border: none;
  outline: none;
}

.toggle-btn:hover {
  transform: scale(1.1);
}

.icon-tools {
  display: inline-block;
  width: 24px;
  height: 24px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke='%23111'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M10.325 4.317c.426-1.756 2.924-1.756 3.35 0a1.724 1.724 0 002.573 1.066c1.543-.94 3.31.826 2.37 2.37a1.724 1.724 0 001.065 2.572c1.756.426 1.756 2.924 0 3.35a1.724 1.724 0 00-1.066 2.573c.94 1.543-.826 3.31-2.37 2.37a1.724 1.724 0 00-2.572 1.065c-.426 1.756-2.924 1.756-3.35 0a1.724 1.724 0 00-2.573-1.066c-1.543.94-3.31-.826-2.37-2.37a1.724 1.724 0 00-1.065-2.572c-1.756-.426-1.756-2.924 0-3.35a1.724 1.724 0 001.066-2.573c-.94-1.543.826-3.31 2.37-2.37.996.608 2.296.07 2.572-1.065z' /%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M15 12a3 3 0 11-6 0 3 3 0 016 0z' /%3E%3C/svg%3E");
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
}
</style>
